function $(obj){
	return document.getElementById(obj);
}
//1、鼠标经过盒子：显示遮罩和大图
$('smallBox').onmouseover=function(){
	$('mask').style.display='block';
	$('bigBox').style.display='block';
}
//2、鼠标离开小盒子：隐藏遮罩和大图
//鼠标移出事件 onmouseover
$('smallBox').onmouseleave=function(){
	$('mask').style.display='none';
	$('bigBox').style.display='none';
}
//3、鼠标移动时
$('smallBox').onmousemove=function(){
	/*1)让遮罩跟着移动
	   获得鼠标位置坐标
	  计算遮罩位置坐标
	  设置遮罩显示位置
	  考虑遮罩可移动范围*/
	 
	//获取鼠标位置坐标
	var pageX=event.pageX;
	var pageY=event.pageY;
	//计算遮罩位置坐标
	var maskX=pageX-$('mask').offsetWidth/2;
	var maskY=pageY-$('mask').offsetHeight/2;
	//考虑遮罩可移动范围
	if(maskX<0){
		maskX=0;
	}
	if(maskY<0){
		maskY=0;
	}
	if(maskX>$('box').offsetWidth-$('mask').offsetWidth){
		maskX=$('box').offsetWidth-$('mask').offsetWidth;
	}
	if(maskY>$('box').offsetHeight-$('mask').offsetHeight){
		maskY=$('box').offsetHeight-$('mask').offsetHeight;
	}
	//设置遮罩显示位置
	$('mask').style.left=maskX+'px';
	$('mask').style.top=maskY+'px';
	
	//按照比例移动大图：计算机移动比例rate：大图片能够移动的总距离/遮罩能够移动的总距离
	var bigImgToMove=$('bigImg').offsetWidth-$('bigBox').offsetWidth;
	var maskToMove=$('smallBox').offsetWidth-$('mask').offsetWidth;
	var rate=bigImgToMove/maskToMove;
	
	$('bigImg').style.left=-rate*maskX+'px';
	$('bigImg').style.top=-rate*maskY+'px';
}
